<template>
  <div class="box">
    <!-- 子组件发射一个事件 使用组件标签的地方就需要来监听-->
    <Child1 :add="add" @update:add="add = $event"></Child1>
    <!-- 使用 .sync 修饰符 -->
    <Child1 :add.sync="add"></Child1>

    <!-- 使用 .sync 修饰符的前提:  -->
    <!-- 绑定值 :xxx 和 自定义事件名称 @update:xxx -->
    <!-- 这两个 xxx,必须名称一致 -->
    <!-- 且自定义事件名称必须使用 update: 开头 -->
  </div>
</template>

<script>
// 想要实现父子组件之间的数据同步,除了使用 V-model,还可以使用 .sync修饰符来实现

// 数据的流向:
//      1. add通过 :add 属性传给子组件,在子组件中接收,进行展示
//      2. 点击按钮的时候,触发 abc 事件,就修改之后的数据传递给父组件
//          父组件自定义事件接收到传回来的参数,修改了 add 的值
//      3. add 的值发生改变之后,重新流到子组件

// 给子组件传递的属性 和 触发的自定义事件 都是我们自己起的名字
//      那么想叫什么叫什么,现在替换 自定义事件的名称
//  <Child1 :add="add" @update:add="add = $event"></Child1>

// 结论:
//      .sync 修饰符可以实现父子之间的数据同步,子组件[必须]实现两个条件
//          1. :xxx   2. @update:xxx
//          注意: 这两个条件中的 xxx 必须相同

// 在哪见过?
//      element ui 中的 dialog组件 使用的就是 .sync 修饰符,实现父子组件间的数据同步
// 场景?
//      一般情况下,当封装组件的时候,组件中没有input框的时候,此时使用 .sync 实现父子组件间的数据同步
//      一般情况下,封装组件的时候,封装的是input框,此时使用 v-model 比较合适
//      二班情况,不按一般情况走,只要想实现父子组件间的数据同步,使用 v-model 和 .sync 都可以,你开心就好

// 导入组件
import Child1 from './Child1.vue'
export default {
  name: 'SyncTest',
  data() {
    return {
      add: 5
    }
  },
  // 注册
  components: { Child1 }
}
</script>

<style scoped></style>
